<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>跟随</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    #main {
        position: absolute;
        background-color: #2CEE57;
    }
    
    #body {
        height: 5000px;
    }
    
    #div5,
    #div1 {
        position: absolute;
        background-color: #1D91D7;
        position: relative;
        left: -150px;
        width: 189px;
    }
    
    #div2,
    #div6 {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #1FBE99;
    }
    
    #div3,
    #div7 {
        width: 39px;
        height: 50px;
        float: left;
        background-color: #0BBCDC;
    }
    
    .div3 {
        width: 39px;
        height: 35px;
        float: left;
        background-color: #D823D6;
        padding-top: 15px;
    }
    </style>
    <script>
    var i = 0;
    var timer3 = null;
    window.onscroll = function(argument) {

        var odiv = document.getElementById('div1');

        var otxt = document.getElementById('txt');

        var omain = document.getElementById('main');


        omainscrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //  trg3 = (document.documentElement.clientHeight - omain.offsetHeight) / 2 + omainscrollTop;
        starmove3(parseInt((document.documentElement.clientHeight - omain.offsetHeight) / 2 + omainscrollTop));

        function starmove3(trg3) {
            clearInterval(timer3);
            timer3 = setInterval(function(argument) {


                speed = (trg3 - omain.offsetTop) / 15;
                speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
                if (omain.offsetTop == trg3) {
                    clearInterval(timer3);
                } else {
                    omain.style.top = omain.offsetTop + speed + 'px';
                }
                // body...
                document.title = speed + ',' + trg3;
            }, 30); // body...
        }


    }
    var timer = null;
    var timer2 = null;

    function starmove(trg1) {
        var otxt = document.getElementById('txt');
        var odiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function(argument) {

            var speed = null;
            if (odiv.offsetLeft < trg1) {
                speed = 11
            } else {
                speed = -11
            };
            otxt.value = odiv.offsetLeft + ',' + speed;
            if (Math.abs(odiv.offsetLeft - trg1) <= 12) {

                clearInterval(timer);
                odiv.style.left = trg1 + 'px';
                otxt.value = odiv.offsetLeft + ',' + speed;
            } else {
                odiv.style.left = odiv.offsetLeft + speed + 'px';
            }
        }, 60);
    };

    function starmove2(trg2) {
        var otxt = document.getElementById('txt');
        var odiv5 = document.getElementById('div5');
        clearInterval(timer2);

        //alert(odiv5.offsetLeft);
        timer2 = setInterval(function(argument) {

            ((odiv5.offsetLeft - trg2) / 8) > 0 ? speed = Math.ceil((odiv5.offsetLeft - trg2) / 8) : speed = Math.floor((odiv5.offsetLeft - trg2) / 8);
            otxt.value = odiv5.offsetLeft + ',' + speed;
            if (Math.abs(odiv5.offsetLeft - trg2) <= 0) {
                clearInterval(timer2);

            } else {
                odiv5.style.left = odiv5.offsetLeft - speed + 'px';
            }
        }, 60);
        // body...
    }
    </script>
</head>

<body>
    <div id="body">
    <div style="position: fixed;top: 0px;">和"跟随1.html"原理不太一样</div>
        <div id="main">
            <input type="text" id="txt">
            <div id="div1" onmouseover="starmove(0)" onmouseout="starmove(-150)">
                <div id="div2"></div>
                <div id="div3"></div>
                <div class="div3">匀速</div>
            </div>
            <div id="div5" onmouseover="starmove2(0)" onmouseout="starmove2(-150)">
                <div id="div6"></div>
                <div id="div7"></div>
                <div class="div3">变速</div>
            </div>
        </div>
    </div>
</body>

</html>
